<template name='userGoodsRecord'>
	<view class="box-infos font12   relative">
	
		<!-- 数据列表 -->
		<view class="content-box " >
			<view class="boxsss100" >
				<!-- 增加、删除 :class="user_id.length<=0 ?'boxsss':'boxsss'"-->
				<view class="top-but" v-if="showSearch=='1'">
					<view class="top-but-box">
						
						<!-- 按日查看的选择日期 -->
						<view class="date-center floatleft" >
							<text selectable="true"  class="  riskTitle" >时间范围:</text>
							<picker class="date-left" 
							mode="date" 
							:value="selectMontOrDay.date[0]" 
							@change="changeStartDate"
							>
								<view class="uni-input cursor">{{selectMontOrDay.date.length >0 ? selectMontOrDay.date[0]:'开始时间'}}</view>
							</picker>
							
							<view class="date-c"> - </view>
							
							<picker class="date-left"  
							mode="date" 
							:value="selectMontOrDay.date[1]" 
							@change="changeEndDate"
							>
								<view class="uni-input cursor">{{selectMontOrDay.date.length >1 ? selectMontOrDay.date[1]:'结束时间'}}</view>
							</picker>
							
							<view class="delete-ipu" 
							style="position: unset;transform: none;"
							v-if="selectMontOrDay.date.length >1" 
							@click="selectMontOrDay.date=[],clickSearch(true)"
							>
								<img src="../../static/img/delete-1.png"  ></img>
							</view>
						</view>
						
						
						<!-- 搜索 -->
						<view class="flex " >
							<view class="searchBox floatleft">
								<text selectable="true"  class="  riskTitle" >商品名称:</text>
								<input
								:focus="search.focus"
								@blur="search.focus=false"
								v-model="search.word" 
								placeholder="输入商品关键字搜索"
								placeholder-class="placeholder-class"
								@confirm="$common.noMultipleClicks('searchBut',searchBut,true)"
								@input="searchBut()"
								class="search-ipu w200"
								
								/>
								<view class="delete-ipu" v-if="search.word!=''" @click="search.word='',search.focus=true">
									<img src="../../static/img/delete-1.png"  ></img>
								</view>
							</view>
						</view>
						
						<view @click="$common.noMultipleClicks('searchBut',searchBut,true)" 
						class="search-but" 
						>
							<img src="../../static/img/search.png" class="ico"></img>
							刷新
						</view>
						
						<button
						@click="$my_excel.userGoodsRecord(resData.list,false)"
						class="nowBut color7 font12"
						>
							导出
						</button>
					</view>
				</view>
				
				<table v-if="resData.list!=undefined && resData.list.length>0">
					<!-- 表头 -->
					<thead>
						<tr >
							<th class="centers ">
								ID 
							</th>
							<th class=" ">
								商品
							</th>
							<th class=" ">
								<view class="flex centers">
									拿货次数
									<view class="sort-button ">
										<view class="desc"  @click="sort.value='count_desc',loadData(true);"></view>
										<view class="asc"   @click="sort.value='count_asc',loadData(true);"></view>
									</view>
								</view>
							</th>
							<th class=" ">
								<view class="flex centers">
									拿货数量
									<view class="sort-button ">
										<view class="desc"  @click="sort.value='count_desc',loadData(true);"></view>
										<view class="asc"   @click="sort.value='count_asc',loadData(true);"></view>
									</view>
								</view>
							</th>
							<th class=" ">
								<view class="flex centers">
									<view >累计金额</view>
									<view class="sort-button ">
										<view class="desc"  @click="sort.value='money_desc',loadData(true);"></view>
										<view class="asc"   @click="sort.value='money_asc',loadData(true);"></view>
									</view>
								</view>
							</th>
							<th class=" ">
								<view class="flex centers">
									最近购买时间
									<view class="sort-button ">
										<view class="desc"  @click="sort.value='time_desc',loadData(true);"></view>
										<view class="asc"   @click="sort.value='time_asc',loadData(true);"></view>
									</view>
								</view>
							</th>
						</tr>
					</thead>
					<tbody>
						<!-- 内容 -->
						<tr v-for="(item,index) in resData.list" 
						:key="index" 
						@click="GotoGoodsRecord(item,index)"
						:class="TabcheckedIndex == index ? 'goods-list-select':''"
						>
							<td class="centers  font12">
								{{item.goods_id}}
							</td>
							
							<td class="bb4e00 hover relative">
								{{item.goods_name}}
								<view class="back_data">
									<image src="/static/goods/score.png"
									class="ico" v-if="item.goods.isScore==1"
									:title="$global.title.m30"
									></image>
								</view>
							</td>
							
							<td class="  centers">
								{{item.goods_count}}
							</td>
							<td class="  centers">
								{{item.goods_count_sum}}
							</td>
							<td class="  centers">
								￥{{item.sum_money}}
							</td>
							<td class="centers  font12">
								{{item.date}}
							</td>
							
						</tr>
					
					</tbody>
				</table>
				
				<!-- 暂无数据 -->
				<empty v-if="resData.list==undefined || resData.list.length==0"></empty>
				<!-- end -->
				
			</view>
				<pages 
				v-if="showSearch=='1' || showSearch=='2'"
				:sum="page.sum"
				:current="page.nowPage"
				@updatePage="updatePage"
				></pages>
				<!-- end -->
		</view>


		
		<!-- 客户历史购买记录表格区 -->
		<uni-popup ref="pageGoodsRecord" type="center" :title="`[${pageGoodsRecord.title}]记录`">
			<goods_record class="sp_record w100"
				:OnPageSearch="pageGoodsRecord.GoodsId"
				:searchUserId="user_id"
				@goodsRecordClose=""
				:showSearchClose="false"
				:showGongYing="false"
				:isXiaoShou="false"
			></goods_record>
		</uni-popup>
		<!-- end -->

	</view>
</template>

<script>
	import goods_record from "@/components/goods_record/goods_record.vue"
	import pages from "@/components/admin-components/pages.vue"
	import empty from "@/components/admin-components/empty.vue"
	import shopping_admin from "@/components/goods/goods.vue"
	export default{
		name:'userGoodsRecord',
		components: {
			pages,empty,shopping_admin,
		},
		data(){
			return{
				selectMontOrDay:{
					date:[],//按日查看的日期范围
				},
				pageGoodsRecord:{
					GoodsId:'',
					title:''
				},
			
				page:{
					
					nowPage:1,//当前页数
					pageCount:1,//总页数
					maxCount:0,
					sum:0,
					pageCounts:15,
				},
				resData:{},
				TabcheckedIndex:-1,//当前选中的列表项
				search:{
					focus:false,//是否获得焦点
					word:'',//搜索内容
				},
				sort:{//排序方式
					value:'',
					index:0
				},
			}
		},
		 // 此处定义传入的数据
		props: {
			user_id:{
				type: String,
				default: ''
			},
			
			showSearch:{
				type: String,
				default: '1'
			},
		},
		  watch: {
			user_id(newVal, oldVal) {
			  //console.log(`message changed from ${oldVal} to ${newVal}`);
			  // 这里可以执行你需要的任何操作
				if(this.user_id == undefined && this.user_id == ''){
					return
				}
				this.loadData(true);
			}
		  },
		created() {
			if(this.user_id == undefined && this.user_id == ''){
				return
			}
			//默认按日的方式
			// var date = this.$common.GetFormattedDate()
			// this.selectMontOrDay.date.push(date)
			// this.selectMontOrDay.date.push(date)
			this.loadData(true);
		},
		methods:{
			//回调第一个时间
			changeStartDate(res){
				this.selectMontOrDay.date[0] = res.detail.value
				this.$set(this.selectMontOrDay.date,0,this.selectMontOrDay.date[0])
				//this.clickSearch(true)
			},
			//回调第二个时间
			changeEndDate(res){
				this.selectMontOrDay.date[1] = res.detail.value
				this.$set(this.selectMontOrDay.date,1,this.selectMontOrDay.date[1])
			},
			GotoGoodsRecord(item,index){
				this.TabcheckedIndex = index
				this.pageGoodsRecord.GoodsId = item.goods_id
				this.pageGoodsRecord.title   = item.goods_name
				this.$refs.pageGoodsRecord.open()
			},
			//发起搜索
			searchBut(){
				this.sort.value = ""
				this.sort.index = 0
				this.loadData(true)
			},
	
			/**
			 * 分页器回调
			 * 
			*/
			updatePage(pageName,pageCount){
				var that = this
				that.page.nowPage = pageName
				that.page.pageCounts = pageCount
				that.loadData(false);
			},
			/**
			 * 读取商品
			 * type : goods_list|goods_search
			 * isUpdatePage : 如果是分页器回调的就不出时候页码，如果是点击获取数据的就初始化页码为1
			 * 
			*/
			loadData(isUpdatePage=true,ReqExport=0){
				var that = this
				that.TabcheckedIndex=0//初始化列表选中项
				that.page.nowPage = isUpdatePage==true ? 1:that.page.nowPage;
				
				
				//日期构建
				if(that.selectMontOrDay.date.length>=2){
					var start_date = that.selectMontOrDay.date[0]
					var end_date = that.selectMontOrDay.date[1]
				}else{
					var start_date = ''
					var end_date = ''
				}
				
				that.$common.get_request(
					{
						type:'userGoodsRecord',
						search:that.search.word,//搜索内容
						pages:that.page.nowPage,//当前位于页数
						page_count:that.page.pageCounts,//当前请求页的数量
						user_id:that.user_id,
						sort:that.sort.value,//排序
						start_date:start_date,
						end_date  :end_date,
						
					},
					
					(res)=>{
						
						that.resData = res
						
						
						
						that.page.sum  = res.sum
						if(isUpdatePage == true){
						that.page.nowPage  = 1
						}
						
						
					}
				);
			},
			
		}
	}
</script>

<style>
</style>
